/**
 * 登录路由组件
 */
import React, { Component } from 'react'
import {
    NavBar,
    WingBlank,
    List,
    InputItem,
    WhiteSpace,
    Radio,
    Button
  } from 'antd-mobile'
import { connect } from 'react-redux'
import {Redirect} from 'react-router-dom'

import Logo from '../../components/logo/Logo'
import {login} from '../../redux/actions'

// const ListItem = List.Item
class Login extends Component {

    state = {
        username: '',
        password:'',
    }

    // 处理输入的数据，更新对应的状态
    handleChange = (inputTpye, val)=>{
        this.setState({
            [inputTpye]: val    // 使用[]把属性名改为变量
        })
    }
    loggin = ()=>{
        this.props.login(this.state)
    }
  
    toRegister = ()=>{
        this.props.history.replace('/register')
    }
    render() {
        const {msg, redirectTo} = this.props.user
        if(redirectTo){
            return <Redirect to={redirectTo}/>
        }
        return (
            <div>
                <NavBar>硅&nbsp;谷&nbsp;直&nbsp;聘</NavBar>
                <Logo/>
                <WingBlank>
                    <List>
                        {msg ? <div className='error-msg'>{msg}</div> : null}
                        <InputItem placeholder='请输入用户名' onChange={val =>{this.handleChange('username', val)}}>用户名：</InputItem>
                        <WhiteSpace/>
                        <InputItem placeholder='请输入密码' onChange={val =>{this.handleChange('password', val)}}>密码：</InputItem>
                        <WhiteSpace/>
                        <Button type="primary" onClick={this.loggin}>登&nbsp;&nbsp;&nbsp;录</Button>
                        <WhiteSpace/>
                        <Button onClick={this.toRegister}>还没有账号</Button>

                    </List>
                </WingBlank>
            </div>
        )
    }
}

export default connect(
    state =>({user: state.user}),
    {login}
)(Login)